import React, { Component } from 'react'
import { Swipe } from 'react-vant';
import { SearchOutlined } from '@ant-design/icons';
import Like from '../image/找医生.png'
import hold from '../image/找医院.png'
import good from '../image/名院专家.png'
import qur from '../image/快速购药.png'
import page from '../image/图文急诊.png'
import phon from '../image/快捷电话.png'
import chun from '../image/春雨活动.png'
import sun10 from '../image/18元.png'
import sun11 from '../image/防治心血管病.png'
import sun12 from '../image/解决口腔问题.png'
import sun13 from '../image/解决口腔问题.png'
import sun14 from '../image/防治心血管病.png'
import '../home.css';
import axios from "axios"
export default class Home extends Component {
    state = {
        homelist:''
    }
    componentDidMount() {
        axios({
            url: '/api/homelist',
            method: 'post'
        }).then(res => {
            console.log(res);
            this.setState({
                homelist: res.data.data
            })
        })
    }
    render() {
        const { homelist} = this.state;
        return (
            <div className="first">
                <div className="firsthead">
                    <div className="search1">
                        <SearchOutlined />
                        <input placeholder="请输入你要搜索内容" type="text" onChange={(e) => this.onSearch(e.target.value)}></input>
                    </div>
                </div>
                <div className="mian">
                    <div className="swippr">
                        <Swipe
                            autoplay={3000}
                            
                            pagination={{
                                renderBullet: (index, className) => {
                                    return `<span class="custom-pagination--bullet ${className}"></span>`;
                                },
                            }}
                        >
                            <Swipe.Item>
                                <img src="https://img2.baidu.com/it/u=669659021,649095719&fm=26&fmt=auto" alt="" />
                            </Swipe.Item>
                            <Swipe.Item>
                                <img src="https://img2.baidu.com/it/u=3585910165,2338096994&fm=26&fmt=auto" alt="" />
                            </Swipe.Item>
                            <Swipe.Item>
                                <img src="https://img1.baidu.com/it/u=1986917335,1601549445&fm=26&fmt=auto" alt="" />
                            </Swipe.Item>
                            <Swipe.Item>
                                <img src="https://img1.baidu.com/it/u=1717684061,1952363557&fm=26&fmt=auto" alt="" />
                            </Swipe.Item>
                        </Swipe>
                    </div>
                    <div className="cup">
                        <div className="cupdiv">
                            <div className="leftdiv">
                                <img src={Like} alt="" />
                            </div>
                            <div className="rightdiv">
                                <p>快速提问</p>
                                <p>智能匹配医生</p>
                            </div>
                        </div>
                        <div className="cupdiv">
                            <div className="leftdiv">
                                <img src={Like} alt="" />
                            </div>
                            <div className="rightdiv">
                                <p>找医生</p>
                                <p>全国60万+名医生</p>
                            </div>
                        </div>
                    </div>
                    <div className="tabdiv">
                        <div>
                            <img src={hold} alt="" /><br />
                            <br /> <span>找医院</span>
                        </div> <div>
                            <img src={good} alt="" /><br />
                            <br /> <span>名院专家</span>
                        </div> <div>
                            <img src={qur} alt="" /><br />
                            <br /><span>快速购药</span>
                        </div> <div>
                            <img src={page} alt="" /><br />
                            <br /> <span>图文急诊</span>
                        </div> <div>
                            <img src={phon} alt="" /><br />
                            <br /> <span>快捷电话</span>
                        </div>
                    </div>
                    <div className="activity">
                        <img src={chun} alt="" />
                        <p>世界骨关节炎日，专家在线免费义诊</p>
                    </div>
                    <div className="wrap1">
                        <div className="office_one">
                            <h3>特色科室</h3>
                            <span>查看全部&gt;</span>
                        </div>
                        <div className="office_two">
                            <div className='int_one1'>
                                <img src={sun10} alt=""></img>
                            </div>
                            <div className='int_two1'>
                                <img src={sun11} alt=""></img>
                                <img src={sun12} alt=""></img>
                            </div>
                        </div>
                        <div className="school1">
                            <img src={sun13} alt=""></img>
                            <img src={sun14} alt=""></img>
                        </div>
                        <div className="homelist">
                        {
                                homelist.length && homelist.map((item, index) => {
                                    return <dl key={index}>
                                        <dt>
                                            <img src={item.img} alt="" />
                                        </dt>
                                        <dd>
                                            <span>{item.title}</span>
                                            <span>{item.desc}</span>
                                        </dd>
                                    </dl>
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
